<template>
  <view class="w-full max-w-[750rpx] mx-auto min-h-screen bg-[#f6f8fa] p-[32rpx] box-border">
    <text class="block text-[56rpx] font-extrabold mb-[48rpx] text-center text-blue-600 drop-shadow">个人基本健康信息</text>
    
    <!-- 导航卡片网格 -->
    <view class="flex flex-col gap-[32rpx] max-w-[700rpx] w-full mx-auto">
      
      <!-- 用户基本信息 -->
      <view class="bg-white rounded-[24rpx] shadow-[0_4rpx_24rpx_rgba(33,150,243,0.08)] p-[32rpx] box-border overflow-hidden border border-blue-50">
        <view class="flex items-center mb-[24rpx]">
          <view class="w-[64rpx] h-[64rpx] bg-blue-100 rounded-[16rpx] flex items-center justify-center mr-[20rpx]">
            <text class="text-[32rpx]">👤</text>
          </view>
          <view class="flex-1">
            <text class="block text-[36rpx] font-bold text-gray-800 mb-[4rpx]">用户基本信息</text>
            <text class="text-[22rpx] text-gray-400">填写和管理用户的基本信息</text>
          </view>
        </view>
        <nut-button 
          block 
          type="primary" 
          class="h-[96rpx] rounded-[16rpx] text-[32rpx] font-bold shadow-md bg-blue-500 hover:bg-blue-600 active:bg-blue-700"
          @click="goTo('/package-card/info/user/index')"
        >
          <view class="flex items-center justify-center">
            <text class="text-white mr-[12rpx] text-[32rpx]">📝</text>
            <text class="text-white text-[32rpx] font-medium">用户基本信息</text>
          </view>
        </nut-button>
      </view>
      
      <!-- 人口学信息 -->
      <view class="bg-white rounded-[24rpx] shadow-[0_4rpx_24rpx_rgba(16,185,129,0.08)] p-[32rpx] box-border overflow-hidden border border-green-50">
        <view class="flex items-center mb-[24rpx]">
          <view class="w-[64rpx] h-[64rpx] bg-green-100 rounded-[16rpx] flex items-center justify-center mr-[20rpx]">
            <text class="text-[32rpx]">📊</text>
          </view>
          <view class="flex-1">
            <text class="block text-[36rpx] font-bold text-gray-800 mb-[4rpx]">人口学信息</text>
            <text class="text-[22rpx] text-gray-400">填写和管理人口学相关信息</text>
          </view>
        </view>
        <nut-button 
          block 
          type="primary" 
          class="h-[96rpx] rounded-[16rpx] text-[32rpx] font-bold shadow-md bg-green-500 hover:bg-green-600 active:bg-green-700"
          @click="goTo('/package-card/info/demographic/index')"
        >
          <view class="flex items-center justify-center">
            <text class="text-white mr-[12rpx] text-[32rpx]">📊</text>
            <text class="text-white text-[32rpx] font-medium">人口学信息</text>
          </view>
        </nut-button>
      </view>
      
      <!-- 社会经济学信息 -->
      <view class="bg-white rounded-[24rpx] shadow-[0_4rpx_24rpx_rgba(147,51,234,0.08)] p-[32rpx] box-border overflow-hidden border border-purple-50">
        <view class="flex items-center mb-[24rpx]">
          <view class="w-[64rpx] h-[64rpx] bg-purple-100 rounded-[16rpx] flex items-center justify-center mr-[20rpx]">
            <text class="text-[32rpx]">💼</text>
          </view>
          <view class="flex-1">
            <text class="block text-[36rpx] font-bold text-gray-800 mb-[4rpx]">社会经济学信息</text>
            <text class="text-[22rpx] text-gray-400">填写和管理社会经济相关信息</text>
          </view>
        </view>
        <nut-button 
          block 
          type="primary" 
          class="h-[96rpx] rounded-[16rpx] text-[32rpx] font-bold shadow-md bg-purple-500 hover:bg-purple-600 active:bg-purple-700"
          @click="goTo('/package-card/info/health-social/view')"
        >
          <view class="flex items-center justify-center">
            <text class="text-white mr-[12rpx] text-[32rpx]">💼</text>
            <text class="text-white text-[32rpx] font-medium">社会经济学信息</text>
          </view>
        </nut-button>
      </view>
      
      <!-- 紧急联系人信息 -->
      <view class="bg-white rounded-[24rpx] shadow-[0_4rpx_24rpx_rgba(249,115,22,0.08)] p-[32rpx] box-border overflow-hidden border border-orange-50">
        <view class="flex items-center mb-[24rpx]">
          <view class="w-[64rpx] h-[64rpx] bg-orange-100 rounded-[16rpx] flex items-center justify-center mr-[20rpx]">
            <text class="text-[32rpx]">🚨</text>
          </view>
          <view class="flex-1">
            <text class="block text-[36rpx] font-bold text-gray-800 mb-[4rpx]">紧急联系人信息</text>
            <text class="text-[22rpx] text-gray-400">填写和管理紧急联系人信息</text>
          </view>
        </view>
        <nut-button 
          block 
          type="primary" 
          class="h-[96rpx] rounded-[16rpx] text-[32rpx] font-bold shadow-md bg-orange-500 hover:bg-orange-600 active:bg-orange-700"
          @click="goTo('/package-card/info/emergency-contact/index')"
        >
          <view class="flex items-center justify-center">
            <text class="text-white mr-[12rpx] text-[32rpx]">🚨</text>
            <text class="text-white text-[32rpx] font-medium">紧急联系人信息</text>
          </view>
        </nut-button>
      </view>
      
      <!-- 建档信息 -->
      <view class="bg-white rounded-[24rpx] shadow-[0_4rpx_24rpx_rgba(20,184,166,0.08)] p-[32rpx] box-border overflow-hidden border border-teal-50">
        <view class="flex items-center mb-[24rpx]">
          <view class="w-[64rpx] h-[64rpx] bg-teal-100 rounded-[16rpx] flex items-center justify-center mr-[20rpx]">
            <text class="text-[32rpx]">📁</text>
          </view>
          <view class="flex-1">
            <text class="block text-[36rpx] font-bold text-gray-800 mb-[4rpx]">建档信息</text>
            <text class="text-[22rpx] text-gray-400">填写和管理健康档案信息</text>
          </view>
        </view>
        <nut-button 
          block 
          type="primary" 
          class="h-[96rpx] rounded-[16rpx] text-[32rpx] font-bold shadow-md bg-teal-500 hover:bg-teal-600 active:bg-teal-700"
          @click="goTo('建档信息')"
        >
          <view class="flex items-center justify-center">
            <text class="text-white mr-[12rpx] text-[32rpx]">📁</text>
            <text class="text-white text-[32rpx] font-medium">建档信息</text>
          </view>
        </nut-button>
      </view>
      
      <!-- 家庭医生签约信息 -->
      <view class="bg-white rounded-[24rpx] shadow-[0_4rpx_24rpx_rgba(99,102,241,0.08)] p-[32rpx] box-border overflow-hidden border border-indigo-50">
        <view class="flex items-center mb-[24rpx]">
          <view class="w-[64rpx] h-[64rpx] bg-indigo-100 rounded-[16rpx] flex items-center justify-center mr-[20rpx]">
            <text class="text-[32rpx]">👨‍⚕️</text>
          </view>
          <view class="flex-1">
            <text class="block text-[36rpx] font-bold text-gray-800 mb-[4rpx]">家庭医生签约信息</text>
            <text class="text-[22rpx] text-gray-400">填写和管理家庭医生签约信息</text>
          </view>
        </view>
        <nut-button 
          block 
          type="primary" 
          class="h-[96rpx] rounded-[16rpx] text-[32rpx] font-bold shadow-md bg-indigo-500 hover:bg-indigo-600 active:bg-indigo-700"
          @click="goTo('家庭医生签约信息')"
        >
          <view class="flex items-center justify-center">
            <text class="text-white mr-[12rpx] text-[32rpx]">👨‍⚕️</text>
            <text class="text-white text-[32rpx] font-medium">家庭医生签约信息</text>
          </view>
        </nut-button>
      </view>
      
      <!-- 基础健康信息 -->
      <view class="bg-white rounded-[24rpx] shadow-[0_4rpx_24rpx_rgba(239,68,68,0.08)] p-[32rpx] box-border overflow-hidden border border-red-50">
        <view class="flex items-center mb-[24rpx]">
          <view class="w-[64rpx] h-[64rpx] bg-red-100 rounded-[16rpx] flex items-center justify-center mr-[20rpx]">
            <text class="text-[32rpx]">❤️</text>
          </view>
          <view class="flex-1">
            <text class="block text-[36rpx] font-bold text-gray-800 mb-[4rpx]">基础健康信息</text>
            <text class="text-[22rpx] text-gray-400">填写和管理基础健康信息</text>
          </view>
        </view>
        <nut-button 
          block 
          type="primary" 
          class="h-[96rpx] rounded-[16rpx] text-[32rpx] font-bold shadow-md bg-red-500 hover:bg-red-600 active:bg-red-700"
          @click="goTo('基础健康信息')"
        >
          <view class="flex items-center justify-center">
            <text class="text-white mr-[12rpx] text-[32rpx]">❤️</text>
            <text class="text-white text-[32rpx] font-medium">基础健康信息</text>
          </view>
        </nut-button>
      </view>
    </view>
    
    <!-- 底部提示 -->
    <view class="mt-[48rpx] bg-white rounded-[20rpx] p-[28rpx] shadow-sm max-w-[700rpx] w-full mx-auto box-border border border-gray-100">
      <view class="flex items-center justify-center">
        <text class="text-[28rpx] text-gray-500 text-center font-medium leading-relaxed">
          💡 请完善个人基本健康信息，为健康管理提供准确的数据支持
        </text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro'
// import { Button as NutButton } from '@nutui/nutui-taro'

function goTo(url: string) {
  Taro.navigateTo({
    url: url
  })
}
</script>

<!--
性能优化说明：
- 使用max-w-[750rpx]确保页面不超出屏幕宽度
- 卡片使用统一的阴影和边框样式
- 按钮使用主色调渐变，提升视觉层次
- 所有元素都添加box-border确保布局稳定
- 响应式设计适配不同屏幕尺寸
--> 